<template>
  <div :style="{ background: '#f5eeb4', 'padding-top': '42px' }" id="parent">
    <Heard></Heard>

    <div class="ban">
      <img :src="require('/src/assets/img/banner1.jpg')" alt="" />
      <img :src="require('/src/assets/img/banner2.jpg')" alt="" />
      <img :src="require('/src/assets/img/imga.png')" alt="" />
    </div>

    <div class="tita" id="main_0">
      <img :src="require('/src/assets/img/tita.png')" alt="" />
    </div>

    <div class="weiyou">
      <yu-ding></yu-ding>
      <yu-ding></yu-ding>
      <yu-ding></yu-ding>
    </div>

    <div class="tita" id="main_1">
      <img :src="require('/src/assets/img/titb2.png')" alt="" />
    </div>

    <div class="ban">
      <img :src="require('/src/assets/img/imgb.png')" alt="" />
      <img :src="require('/src/assets/img/imgc.png')" alt="" />
      <img :src="require('/src/assets/img/imgd.png')" alt="" />
      <img :src="require('/src/assets/img/imge.png')" alt="" />
    </div>

    <div class="tita" id="main_2">
      <img :src="require('/src/assets/img/titc.png')" alt="" />
    </div>

    <div class="weiyou">
      <yu-ding></yu-ding>
      <yu-ding></yu-ding>
      <yu-ding></yu-ding>
    </div>

    <div class="shaya">
      <div></div>
      <div>
        <img :src="require('/src/assets/img/imgf.png')" alt="" />
      </div>
    </div>

    <div class="tita" id="main_3">
      <img :src="require('/src/assets/img/titd.png')" alt="" />
    </div>

    <div class="ban">
      <img :src="require('/src/assets/img/s1.png')" alt="" />
    </div>

    <!-- 导航栏 -->
    <nav class="nava">
      <div
        v-for="item in nav"
        :key="item.id"
        @click="meuns(item.id)"
        :class="{ active: tabshow == item.id }"
      >
        {{ item.name }}
      </div>
      <p>返回</p>
    </nav>
  </div>
</template>

<script>
import YuDing from "@/components/contern/YuDing.vue";
import Heard from "@/components/contern/heard.vue"
export default {
  components: {
    YuDing,
    Heard
  },
  data() {
    return {
      nav: [
        { id: 0, name: "微游报名" },
        { id: 1, name: "人气路线" },
        { id: 2, name: "沿途风景" },
        { id: 3, name: "同行寄语" },
      ],
      scrollTopNum: "", //页面滚动的高度
      tabshow: 0, //是否进行某种操作
      top: [],
    };
  },

  mounted() {
    window.addEventListener("scroll", this.debounce(this.windowScroll, 10));

    window.onload = () => {
      let a = main_0.offsetTop;
      let b = main_1.offsetTop;
      let c = main_2.offsetTop;
      let d = main_3.offsetTop;
      this.top = [a, b, c, d];
    };

    // console.log(this.top);
  },
  methods: {
    // 点击导航，进行锚点定位滑动

    meuns(id) {
      let pageId = document.querySelector("#main_" + id);

      // console.log(this.top);
      window.scrollTo({
        top: pageId.offsetTop - 50, //y 上线
        left: 0, //x 左右
        behavior: "smooth", //属性值：默认值auto（相当于instant）、平滑滚动smooth、瞬间滚动instant
      });
    },
    windowScroll() {
      // 滚动条距离页面顶部的距离
      // 以下写法原生兼容
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;

      this.scrollTopNum = scrollTop;
      // console.log(scrollTop);
    },
    debounce(fn, delay) {
      let timer = null; //借助闭包
      return function () {
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(fn, delay); // 简化写法
      };
    },
  },

  watch: {
    scrollTopNum(newValue) {
      if (newValue < this.top[1]) {
        this.tabshow = 0;
        // console.log(newValue);
        // console.log(this.top[1]);
      } else if (newValue >= this.top[1] && newValue < this.top[2]) {
        this.tabshow = 1;
        // console.log(newValue);
        // console.log(this.top[1]);
        // console.log(this.top[2]);
      } else if (newValue >= this.top[2] && newValue < this.top[3]) {
        this.tabshow = 2;
        // console.log(newValue);
        // console.log(this.top[1]);
        // console.log(this.top[2]);
        // console.log(this.top[3]);
      } else if (newValue >= this.top[2]) {
        this.tabshow = 3;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#parent {
  position: relative;
}
.logo {
  width: 100%;
  height: 42px;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;

  > div:nth-child(1) {
    flex: 0.7;
    background-color: #00be8f;
    text-align: left;
    padding: 9px;

    > img {
      width: 110px;
    }
  }
  > div:nth-child(2) {
    flex: 0.38;
    background-color: #00a782;
    text-align: center;
    line-height: 45px;
    color: #fcfefe;
    font-size: 15.5px;
  }
}
.ban {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 20px;
}
.tita {
  width: 60%;
  margin: 0px auto;

  img {
    display: block;
    max-width: 100%;
    line-height: 93px;
  }
}

.weiyou {
  padding-left: 9px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;

  margin: 10px 0 30px 0;
}
.shaya {
  width: 95%;
  height: 220px;
  margin: 20px auto;
  background-color: #f5d36a;
  display: flex;
  > div {
    width: 50%;
    margin: auto 0;
    img {
      width: 100%;
    }
  }
}
.nava {
  width: 100%;
  height: 45px;
  background-color: rgba($color: #000000, $alpha: 0.7);
  display: flex;
  justify-content: flex-start;
  position: fixed;
  bottom: 0;
  left: 0;

  > div {
    flex: 1;
    text-align: center;
    line-height: 35px;
    font-size: 15px;
    color: #fff;
    border-radius: 27px;

    margin: 5px;
  }
  > p {
    position: fixed;
    bottom: 50px;
    right: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    background-color: rgba($color: #000000, $alpha: 0.7);
    color: #fff;
  }
}
.active {
  background-color: #aeacce;
  color: #aafeff;
}
</style>
